<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #mapDiv { width: 980px; height: 600px; }
    #range { width: 340px; }
    .map-box{ padding: 10px; }
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/turf.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
</head>
<body onload="initMap()">
  <p>
    <input type="range" id="range" min="200" max="2000" step="100" value="200" /> <span class="range-text">200 m</span>
  </p>
  <div id="mapDiv"></div>

<script>
var map, mrtGeo;
var dataMap = new google.maps.Data();
var setStyle = function(){
  dataMap.setStyle(function(feature){
    if( feature.getProperty('name') ){
      return { icon: new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=train|FFFF88") };
    }else{ return {}; }
  });
};


function initMap() {
  // 地圖初始設定
  var mapOptions = {
      center: new google.maps.LatLng(25.047502948494675, -238.44572067260742),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapElement = document.getElementById("mapDiv");

  // Google 地圖初始化
  map = new google.maps.Map(mapElement, mapOptions);

  $.get('data/mrt.json', function(data){
    var point, buffered;

    for (var i = 0; i < data.length; i++) {
      point = turf.point([ data[i].longitude, data[i].latitude ], { name: data[i].name });
      buffered = turf.buffer(point, 0.2, "kilometers");
      dataMap.addGeoJson(point);
      dataMap.addGeoJson(buffered);
    }

    setStyle();
    dataMap.setMap(map);


    $('#range').on('change', function(e){
      var meter = parseInt($(this).val(), 10);
      $('.range-text').text( meter + ' m');

      dataMap.setMap(null);
      dataMap = new google.maps.Data();
      setStyle();

      for (var i = 0; i < data.length; i++) {
        point = turf.point([ data[i].longitude, data[i].latitude ], { name: data[i].name });
        buffered = turf.buffer(point, meter * 0.001, "kilometers");
        dataMap.addGeoJson(point);
        dataMap.addGeoJson(buffered);
      }
      dataMap.setMap(map);
    });

  });

}


</script>


</body>
</html>